<template>
  <view
    v-if="avatar.length"
    class="avatar-group"
    :style="avatarGroupStyle"
  >
    <image
      v-for="(item, index) in avatarGroups"
      :key="index"
      :lazy-load="true"
      class="avatar-group-item"
      :style="avatarStyle(index)"
      :src="item"
    />
    <view
      v-if="isShowMoreTips"
      class="more"
      :style="avatarStyle(avatarLimitLen - 1)"
    >
      <text />
      <text class="more-middle" />
      <text />
    </view>
  </view>
</template>

<script>
const AVATAR_LIMIT_LEN = 7;
export default {
  props: {
    avatar: {
      type: Array,
      default: () => []
    },
    /**头像的高宽 */
    height: {
      type: Number,
      default: 60
    },
    /**头像个数限制 */
    avatarLimitLen: {
      type: Number,
      default: AVATAR_LIMIT_LEN
    }
  },
  computed: {
    /**头像截取 */
    avatarGroups() {
      return this.avatar.slice(0, this.avatarLimitLen);
    },
    avatarGroupStyle() {
      return {
        height: `${this.height}rpx`,
        width: `${(this.height * (this.avatarGroups.length + 1)) / 2}rpx`
      };
    },
    /**是否展示图片膜层 */
    isShowMoreTips() {
      return this.avatar.length > this.avatarLimitLen;
    }
  },
  methods: {
    avatarStyle(index) {
      return {
        "z-index": index + 1,
        left: `${(this.height * index) / 2}rpx`,
        width: `${this.height}rpx`,
        height: `${this.height}rpx`
      };
    }
  }
};
</script>

<style lang="scss">
.avatar-group {
  position: relative;
  &-item {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    border-radius: 50%;
    top: 0;
  }
  // .more-modal:last-child::after {
  //   content: "...";
  //   color: #ffffff;
  //   background: #000000;
  //   position: absolute;
  //   top: 0;
  //   text-align: center;
  //   opacity: 0.5;
  //   right: 0;
  //   z-index: 100;
  //   border-radius: 50%;
  //   line-height: 1.5;
  //   width: 100%;
  //   height: 100%;
  // }
  .more {
    color: #ffffff;
    background: #000000;
    position: absolute;
    top: 0;
    text-align: center;
    opacity: 0.5;
    right: 0;
    z-index: 100;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text {
      width: 4px;
      height: 4px;
      background-color: #ffffff;
    }
    &-middle {
      margin: 0 4px;
    }
  }
}
</style>
